<template>
    <div>
        <h4>toRef</h4>
        <p>{{state.foo}}</p>
        <button @click="add">{{stateRefs.foo}}</button>
    </div>
</template>
<script setup>
import { toRefs, reactive } from 'vue'
const state = reactive({
    foo: 1,
    bar: 2
})

const stateRefs = toRefs(state)

const add = () => {
    stateRefs.foo.value++
}
</script>